
#tb{
    border: solid 1px black;
    border-collapse: collapse;
}

.cell{
    width: 30px;
    height: 30px;
    /* border: solid 1px black; */
    background-size: 100% 100%;

    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.cell[state="normal"]{
    background-image: url(blank.png);
}

.cell[state="flag"]{
    background-image: url(flag.png);
}

.cell[state="bombex"]{
    background-image: url(boom_ex.png);
}

.cell[state="bombpl"]{
    background-image: url(boom_plain.png);
}

.cell[state="b0"]{
    background-image: none;
}

/* .cell[bomb]{
    background-image: url(boom_ex.png);
} */

.cell[state="b1"]:before{
    content: "1";
    color: blue;
}
.cell[state="b2"]:before{
    content: "2";
    color: green;
}
.cell[state="b3"]:before{
    content: "3";
    color: red;
}
.cell[state="b4"]:before{
    content: "4";
    color: purple;
}
.cell[state="b5"]:before{
    content: "5";
    color: pink;
}
.cell[state="b6"]:before{
    content: "6";
    color: orange;
}
.cell[state="b7"]:before{
    content: "7";
    color: yellow;
}
.cell[state="b8"]:before{
    content: "8";
    color: cyan;
}